<template>
    <div class="me-top">
      <router-link tag="div" class="user" to="/detail">
        <img src="./image/me_icon.png" alt="">
        <p v-if="userInfo.phone">{{userInfo.phone | phoneFormat}}</p>
        <p v-else>{{userInfo.userName}}</p>
        <i class="itlike-3"></i>
        <i></i>
      </router-link>
      <div class="my-order">
        <div class="order-top">
          <h3>我的订单</h3>
          <span>查看全部 ></span>
        </div>
        <div class="order-bottom">
          <div class="bottom-item">
            <i class="itlike-1"></i>
            <span>待付款</span>
          </div>
          <div class="bottom-item">
            <i class="itlike-2"></i>
            <span>待分享</span>
          </div>
          <div class="bottom-item">
            <i class="itlike-3"></i>
            <span>待发货</span>
          </div>
          <div class="bottom-item">
            <i class="itlike-4"></i>
            <span>待收货</span>
          </div>
          <div class="bottom-item">
            <i class="itlike-5"></i>
            <span>待评价</span>
          </div>
        </div>
      </div>
      <div class="setting">
        <div class="setting-item">
          <i class="itlike-1"></i>
          <span>新人红包</span>
        </div>
        <div class="setting-item">
          <i class="itlike-2"></i>
          <span>多多果园</span>
        </div>
        <div class="setting-item">
          <i class="itlike-3"></i>
          <span>砍价免费拿</span>
        </div>
        <div class="setting-item">
          <i class="itlike-4"></i>
          <span>边逛边赚</span>
        </div>
        <div class="setting-item">
          <i class="itlike-5"></i>
          <span>天天领红包</span>
        </div>
        <div class="setting-item">
          <i class="itlike-uniE902"></i>
          <span>收货地址</span>
        </div>
        <div class="setting-item">
          <i class="itlike-1"></i>
          <span>我的评价</span>
        </div>
        <div class="setting-item">、
          <i class="itlike-3"></i>
          <span>官方客服</span>
        </div>
        <router-link tag="div" class="setting-item" to="/setting">
          <i class="itlike-4"></i>
          <span>设置</span>
        </router-link>
      </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'MeTop',
        computed: {
          // 登录成功跳转过来时，从vuex中获取数据
          ...mapState(['userInfo'])
        },
        filters: {
          // 使用管道对手机验证码登录的客户信息做脱敏处理
          phoneFormat(phone){
            // 字符串转成数组(使用es6新语法 ...将类数组转为数组)
            let phoneArr = [...phone];
            let str = '';
            phoneArr.forEach((item,index)=>{
              if(index == 3 || index == 4 || index == 5 || index == 6){
                str+='*'
              }else {
                str+=item;
              }
            });
            return str;
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .me-top
    font-size 14px
    .user
      display flex
      flex-direction row
      align-items center
      padding 20px
      background-color: #fff
      margin-bottom 10px
      p
        margin 0 10px
      img
        width 60px
        height 60px
        border-radius 50%
      i
        font-size 25px
    .my-order
      background-color: #fff
      .order-top
        display flex
        flex-direction row
        padding 10px 10px
        justify-content space-between
        height 44px
      .order-bottom
        display flex
        .bottom-item
          flex 1
          height 60px
          display flex
          flex-direction column
          justify-content center
          align-items center
          i
            font-size 30px
            color #E9232C
            margin-bottom 5px
    .setting
      background-color: #fff
      margin-top 10px
      display flex
      justify-content space-between
      flex-wrap wrap
      .setting-item
        width 90px
        height 70px
        display flex
        flex-direction column
        justify-content center
        align-items center
        i
          font-size 30px
          color orange
          margin-bottom 5px
</style>
